<template>
	<view class="layer" :style="{height:rootHeight + 'px'}">
		<comHeader class="bgc"  style='height: 570upx;' :config="navConfig2"/>
		<HeaderNavInput :config="navConfig" />
			<view class="headIcon">
				<view class="touxiang"><image src="/static/myPic/touXiang.png" mode=""></image></view>
				<view class="nicheng">昵称</view>
				<view class="jifen"><navigator url="">65320</navigator><view class="jfen">积分</view></view><br>
				<view class="coll-care">
					<view class="coll" @click="toColl">
						<text class="coll-num">1232</text><br>
						<text class="coll-name">收藏</text>
					</view>
					<view class="line"></view>
					<view class="coll" @click="toCare">
						<text class="coll-num">523</text><br>
						<text class="coll-name">关注</text>
					</view>
				</view>
			</view>
			<!-- 图标区域1 -->
			<view class="icon">
					<text class="my-order-label" @click="toOrderList('shopOrder?state=0')">我的订单</text>
					<view class="icon-list">
						<view class="item" v-for="(item,index) in iconData" :key='index' @click="toOrderList(item.url)">
							<image :src="item.img" mode=""></image>
							<text>{{item.name}}</text>
						</view>
					</view>
			</view>
			<ShopFootMenu :navIndex='2' />
	</view>
</template>

<script>
	import ShopFootMenu from '@/components/ShopFootMenu.vue'
	export default{
		data(){
			return{
				navConfig: {
					left:{
						leftExist:false,
						ifleftGoback:true,
						leftGoback:'arrowleft',
						leftGobackColor:'#ffffff',
						leftIconName:'',
						leftIcon:'',
						
					},
					mid:{
						ifSearch:false,
						placeText:'请输入搜索内容'
						},
					right:{
						rightExist:true,
						rightIcon1:'/static/msg.png',
						rightIcon2:'',
						rightIconName1:'',
						rightIconName2:'',
						ifrightIcon2:false,
						ifrightIcon1:true
					}
				},
				navConfig2: {
					isFixed:false, //是否absolute布局
					left:{
						
						isShowLeft:false,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:false,
						text:'',
						textColor:'#000'
					},
					right:{
						text:'发布',
						isShowRight:false,
					}
				},
				iconData:[
					
					{
						img:'/static/myPic/fuKuan.png',
						name:'待付款',
						url:'shopOrder?state=1'
					},
					{
						img:'/static/myPic/chuXing.png',
						name:'待发货',
						url:'shopOrder?state=2'
					},
					{
						img:'/static/myPic/chuXing.png',
						name:'待收货',
						url:'shopOrder?state=3'
					},
					{
						img:'/static/myPic/pingJia.png',
						name:'待评价',
						url:'shopOrder?state=4'
					},
					{
						img:'/static/myPic/tuiKuan.png',
						name:'退款',
						url:'shopOrder?state=5'
					}
				]
				
			}
		},
		methods: {
			toColl() {
				uni.navigateTo({
					url:'shopColl'
				})
			},
			toCare(){
				uni.navigateTo({
					url:'shopCare'
				})
			},
			toOrderList(path){
				uni.navigateTo({
					url:path
				})
			}
		},
		components: {
			ShopFootMenu
		},
		computed:{
			rootHeight(){
				return global.winHeight
			}
		}
	}
	
	
</script>

<style>
	*{
		margin: 0;
		padding: 0;
		
	}
	.my-order-label{
		width: 100%;
		height: 40upx;
		margin-left: 25upx;
		padding-top: 30upx;
		display: block;
		font-size: 30upx;
	}
	.coll-care{
		width: 500upx;
		margin-left: 125upx;
		top: 180upx;
		position: absolute;
		height: 120upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.coll{
		width: 200upx;
		height: 120upx;
		text-align: center;
	}
	.coll-num{
		font-size: 26upx;
		color: #FFFFFF;
	}
	.coll-name{
		font-size: 26upx;
		color: #FFFFFF;
	}
	.line{
		width: 2upx;
		height: 58upx;
		margin-top: 31upx;
		background: #FFFFFF;
	}
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		
		background-color: #F6F6F6;
	}
	.bgc{
		position: absolute;
		width: 750upx;
		height: 355upx;
		background-image: linear-gradient(to right, #54B0FF,#5773FE);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5773FE', endColorstr='#54B0FF', GradientType=1);	
		border-radius: 0 0 60upx 60upx;
	}
	.headIcon{
		position: relative;
		margin-top: 80upx;
		height: auto;
		/* display: table; */
	}
	.headIcon image{
		width: 20upx;
		height: 22upx;
		margin-left: 627upx;
		margin-top: 89upx;
		float: left;
	}
	.headIcon i{
		width: 55upx;
		height: 25upx;
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: #FFFFFF;
		margin-left: 14upx;
		margin-top: 80upx;
		float: left;
	}
	.touxiang image{
		float: left;
		width: 120upx;
		height: 120upx;
		margin-left: 28upx;
		margin-top: 30upx;
	}
	.nicheng{
		float: left;
		width: 70upx;
		height: 28upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #FFFFFF;
		margin-top: 20upx;
		margin-left: 35upx;
	}
	.jifen{
		float: left;
		width:200upx;
		height: 30upx;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: #FFFFFF;
		margin-top: 70upx;
		margin-left: -70upx;
	}
	.jifen navigator{
		width: 100upx;
		height: 27upx;
		float: left;
	}
	.jifen .jfen{
		width: 65upx;
		height: 27upx;
		float: left;
	}
	.CZzhi{
		width: 100upx;
		height: 28upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: #fff;
		margin-top: 120upx;
		margin-left: -200upx;
		float: left;
		margin-bottom: 50upx;
	}
	
	/* 图标区域1 */
	.icon{
		top: 452upx;
		margin-left: 29upx;
		width: 700upx;
		height: 230upx;
		background: rgba(254,254,254,1);
		box-shadow: -0.419upx 5.985upx 9upx 0upx rgba(221,222,224,0.48);
		position: absolute;
		border-radius:10upx 10upx 0 0;
	}
	.icon-list{
		width:  650upx;
		padding-left: 25upx;
		padding-right: 25upx;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
	}
	.item {
		width: 100upx;
		height: 160upx;
		text-align: center;
		position: relative;
	}
	.item image{
		width: 100upx;
		height: 100upx;
		
		margin-top: 5upx;
	}
	.item text{
		height: 23upx;
		width: 100%;
		display: block;
		top: 100upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		position: absolute;
		
	}

</style>
